import React from "react";
import { sleep } from 'antd-mobile/es/utils/sleep';
import styles from '@/assets/css/guest.module.css';
import type guest from "@/types/guest";
import type business from "@/types/business";

const Index = () =>
{
    const [business] = useState<business>(React.business);
    const [list,SetList] = useState<guest[]>([]);
    const [HasMore,SetHasMore] = useState<boolean>(true);
    const [page,SetPage] = useState<number>(1);
    const [ListCount,SetListCount] = useState<number>(0);

    const SwipeActionRef = useRef();

    const RightBtn = [
        {
            key: 'delete',
            text: '删除住客',
            color: 'danger',
        }
    ];

    // 下拉刷新
    const OnRefresh = async () =>
    {
        await sleep(1000);
        SetList([]);
        SetPage(1);
        SetHasMore(true);
    }

    // 上拉加载
    const OnLoadMore = async () =>
    {
        await sleep(1000);
        await GetGuestData();
    }

    const GetGuestData = async () =>
    {
        const params = {
            page,
            busid:business.id
        }

        const result = await React.Http.post('/guest/index',params);

        if(result.code === 1)
        {
            const count = result.data.count ?? 0;

            SetList(v => {
                // 把新的数据和旧数据合并
                const list = [...v,...result.data.list];

                SetListCount(v => v + list.length);

                return list;
            })

            if(count === ListCount)
            {
                SetHasMore(false);

                return false;
            }

            SetHasMore(true);
            SetPage(page => page + 1);
        }else{
            SetHasMore(false);
            React.fail(result.msg);
        }
    }

    // 删除事件
    const OnDelete = (id:number,index:number) =>
    {
        React.UI.Dialog.confirm({
            title:'删除',
            content:'是否确认删除住客？',
            onConfirm:async () =>
            {
                const result = await React.Http.post('/guest/del',{
                    busid:business.id,
                    id
                });

                if(result.code === 1)
                {
                    React.success(result.msg,() => {
                        list.splice(index,1);

                        SetListCount(list.length);

                        SetList([...list]);
                    });
                }else{
                    React.fail(result.msg);
                }
            }
        })
    }

    return (
        <>
            <React.UI.PullToRefresh onRefresh={OnRefresh}>
                {/* 列表结构 */}
                <React.UI.List>
                    {list.map((item: guest, key: number) => (
                        <React.UI.SwipeAction
                            ref={SwipeActionRef}
                            key={key}
                            rightActions={RightBtn}
                            onAction={() => OnDelete(item.id,key)}
                        >
                            <React.UI.List.Item
                                key={key}
                                description={item.mobile}
                                onClick={() => React.navigate(`/guest/edit?gid=${item.id}`)}
                            >
                                {item.nickname}({item.gender_text})
                            </React.UI.List.Item>
                        </React.UI.SwipeAction>
                    ))}
                </React.UI.List>

                {/* 上拉加载 */}
                <React.UI.InfiniteScroll
                    loadMore={OnLoadMore}
                    hasMore={HasMore}
                    threshold={0}
                />
            </React.UI.PullToRefresh>

            <div className={styles.AddGuest}>
                <Link to="/guest/add">添加住客</Link>
            </div>
        </>
    )
}

export default Index;